<!DOCTYPE html>
<html lang="en">

<head>
	<title>Mock Platfrom</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
	<link rel="stylesheet" href="css/fullcalendar.css" />
	<link rel="stylesheet" href="css/maruti-style.css" />
	<link rel="stylesheet" href="css/maruti-media.css" class="skin-color" />
	<link href="css/chosen.css" rel="stylesheet">
	
	<link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
	
	<script src="js/excanvas.min.js"></script> 
	<script src="js/jquery.min.js"></script> 
	<script src="js/jquery.ui.custom.js"></script> 
	<script src="js/bootstrap.min.js"></script> 
	<script src="js/jquery.flot.min.js"></script> 
	<script src="js/jquery.flot.resize.min.js"></script> 
	<script src="js/jquery.peity.min.js"></script> 
	<script src="js/fullcalendar.min.js"></script> 
	<script src="js/chosen.jquery.js"></script>
	<!-- <script src="js/inone.js"></script> -->
	
</head>
<body>

<!--Header-part-->
<div id="header">
  <h3 style="color: #FF3300;">&nbsp;Mock Platfrom</h3>
</div>
<!--close-Header-part--> 

<!--close-top-Header-menu-->

<div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i> 首页</a>
  <ul>
    <li class="active"><a href="index.html"><i class="icon icon-home"></i> <span>首页</span></a></li>
    <li> <a href="mould.html"><i class="icon icon-signal"></i> <span>业务类型管理</span></a> </li>
  	  <li> <a href="content.html"><i class="icon icon-inbox"></i> <span>动态数据管理</span></a> </li>
  	 <li> <a href="json.html"><i class="icon icon-text-width"></i> <span>json解析</span></a> </li>
  </ul>
</div>

<div id="content">
  <div id="content-header">
    <div id="breadcrumb"> <a href="index.html" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a>
    <a href="json.html" class="current">json解析</a>
    </div>
    <h1>json解析</h1>
    
  </div>
  
  <div class="container-fluid">
                <div class="row-fluid">
				<div class="span12">
						<div class="widget-box">
							<div class="widget-title">
								<span class="icon">
									<i class="icon-th-list"></i>
								</span>
								<h5>数据解析</h5>
							</div>
							<div class="widget-content">
<!-- 								<textarea onkeyup="input()" style="width: 620px;" id="json_input" name="json_input" class="json_input" rows="32" spellcheck="false" placeholder="请输入json字符串解析后修改数据"></textarea>
								<textarea style="width: 620px;" id="json_out" name="json_out" class="json_input" rows="32" spellcheck="false" placeholder="请输入json字符串解析后修改数据"></textarea>
 -->							
 							<div  style="padding:0;width:500px;float: left;">
							        <textarea id="json-src" placeholder="在此输入json字符串或XML字符串..." class="form-control" style="width:450px;height:550px;padding:20px;border:0;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;resize: none; outline:none;">{
"Json解析":"支持格式化高亮折叠",
"支持XML转换":"支持XML转换Json,Json转XML",
"Json格式验证":"更详细准确的错误信息"	
}</textarea>
							 </div>
							 
							 <div  style="padding:0;width:1270px;background: white;">
							        <div style="padding:10px;font-size:16px;border-bottom:solid 1px #ddd;" class="navi">
							            <a  class="tip zip" title="" data-placement="bottom"  style="color:#999;">压缩</a>
							            <a class="tip xml" title="" data-placement="bottom" style="color:#15b374;">转xml或json</a>
							            <a class="tip clear" title="" data-placement="bottom" >清空</a>
							        </div>
							        <div id="json-target" style="height:510px;padding:20px;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;resize: none;overflow-y:scroll; outline:none;"><textarea style="width:100%;height:100%;border:0;resize:none;">&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;root&gt;
							  &lt;Json解析&gt;支持格式化高亮折叠&lt;/Json解析&gt;
							  &lt;支持XML转换&gt;支持XML转换Json,Json转XML&lt;/支持XML转换&gt;
							  &lt;Json格式验证&gt;更详细准确的错误信息&lt;/Json格式验证&gt;
							&lt;/root&gt;
							</textarea></div>
							        <form id="form-save" method="POST"><input type="hidden" value="" id="txt-content" name="content"></form>
							    </div>
 							</div>
						</div>
					</div>
			</div>
  </div>
  </div>  
<div class="row-fluid">
      <div id="footer" class="span12"> 2016 &copy; Mock Platfrom</div>
    </div>
         
         
<script type="text/javascript" src="js/hm.js"></script>
<script type="text/javascript" async="" src="js/analytics.js"></script>
<script type="text/javascript" src="js/jquery.message.js"></script>
<div style="clear:both;"></div><div id="jquery-beauty-msg"></div>
<script type="text/javascript" src="js/jquery.json.js"></script>
<script type="text/javascript" src="js/jquery.xml2json.js"></script>
<script type="text/javascript" src="js/jquery.json2xml.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jsonlint.js"></script>         
<script  type="text/javascript">
	var current_json = '';
	var current_json_str = '';
	var xml_flag = false;
	var zip_flag = false;
	$('.tip').tooltip();
	function init(){
	    xml_flag = false;
	    zip_flag = false;
	    $('.xml').attr('style','color:#999;');
	    $('.zip').attr('style','color:#999;');
	}
	$('#json-src').keyup(function(){
	    init();
	    var content = $.trim($(this).val());
	    var result = '';
	    if (content!='') {
	        //如果是xml,那么转换为json
	        if (content.substr(0,1) === '<' && content.substr(-1,1) === '>') {
	            try{
	                var json_obj = $.xml2json(content);
	                content = JSON.stringify(json_obj);
	            }catch(e){
	                result = '解析错误：<span style="color: #f1592a;font-weight:bold;">' + e.message + '</span>';
	                current_json_str = result;
	                $('#json-target').html(result);
	                return false;
	            }
	
	        }
	        try{
	            current_json = jsonlint.parse(content);
	            current_json_str = JSON.stringify(current_json);
	            //current_json = JSON.parse(content);
	            result = new JSONFormat(content,4).toString();
	        }catch(e){
	            result = '<span style="color: #f1592a;font-weight:bold;">' + e + '</span>';
	            current_json_str = result;
	        }
	
	        $('#json-target').html(result);
	    }else{
	        $('#json-target').html('');
	    }
	
	});
	$('.xml').click(function(){
	    if (xml_flag) {
	        $('#json-src').keyup();
	    }else{
	        var result = $.json2xml(current_json);
	        $('#json-target').html('<textarea style="width:100%;height:100%;border:0;resize:none;">'+result+'</textarea>');
	        xml_flag = true;
	        $(this).attr('style','color:#15b374;');
	    }
	
	});
	$('.zip').click(function(){
	    if (zip_flag) {
	        $('#json-src').keyup();
	    }else{
	        $('#json-target').html(current_json_str);
	        zip_flag = true;
	        $(this).attr('style','color:#15b374;');
	    }
	
	});
	$('.clear').click(function(){
	     $('#json-src').val('');
	     $('#json-target').html('');
	});
	$('.save').click(function(){
	    var content = JSON.stringify(current_json);
	    $('#txt-content').val(content);
	    $("#form-save").submit();
	});
	$('#json-src').keyup();
</script>
</body>

</html>




